<template>
    <div class="nowtime">
        <div class="date">
            <div class="_date">{{ formattedDate }}</div>
            <div class="_time">{{ formattedTime }}</div>
            <div class="_week">{{ weekDay }}</div>
        </div>
        <div class="remark">{{ remark }}</div>
        <div class="tips">*德丽莎温馨提示:{{ tips }}</div>
    </div>
</template>

<script setup lang="ts">

const props = defineProps(["formattedDate","formattedTime","weekDay"])

const weekremark = ["周日周日,人间末日", "周一周一,马上归西", "周二周二,甩锅不干", "周三周三,命剩一半", "周四周四,休眠多日", "周五周五,弹射起舞", "周六周六,大鱼大肉"]
const remark = computed(() => {
    let week = new Date().getDay()
    return weekremark[week]
})

const tips = computed(() => {
    if (props.weekDay == "星期六" || props.weekDay == "星期日") {
        return "休息时间到!"
    } else if (new Date().getHours() >= 17 || new Date().getHours() < 9) {
        return "下班时间到!"
    } else {
        return "还没有下班哦~"
    }
})
</script>

<style lang="scss" scoped>
.nowtime {
    width: 100%;
    height: 250px;
    padding: 16px 24px;
    box-sizing: border-box;
    font-family: "qq";
    position: relative;

    .date {
        ._date {
            font-size: 28px;
        }

        ._time {
            font-size: 46px;
            margin-top: 12px;
        }

        ._week {
            font-size: 24px;
            margin-top: 12px;
        }
    }

    .remark {
        font-size: 20px;
        margin-top: 12px;
        @extend .font;
    }

    .tips {
        position: absolute;
        width: 100%;
        font-size: 12px;
        bottom: 6px;
    }
}

// 渐变字体
.font {
    background-image: -webkit-linear-gradient(right, rgba(249, 69, 252, 1) 0%, rgba(106, 241, 101, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
</style>